<template>
	<view>
		<div class="address" @click="chooseAddress">
			<template v-if="addressObj">
				<view class="item">
					<view class="name">收货人：{{addressObj.name}} <text class="fr">{{addressObj.mobile}}</text></view>
					<view class="detail_address">
						{{addressObj.address}}{{addressObj.detailed_address}}
					</view>
				</view>
			</template>
			<template v-else>
				<view class="no_address">
					请选择收货地址 <image class="fr" src="../../static/right.png" mode=""></image>
				</view>
			</template>
		</div>
		<view class="goods_info">
			<view class="title">
				商品信息
			</view>
			<view class="info">
				<image v-if="detail.images" :src="baseUrl + detail.images[0]" mode=""></image>
				<view class="right">
					<view class="name">
						{{detail.name}}
					</view>
					<view class="price">
						{{detail.paypoints}} <text>宝币</text>
					</view>
				</view>
			</view>
		</view>
		<div class="form">
			<div class="list">
				<span class="left">备注</span>
				<span class="right">
					<input type="text" v-model="remarks" placeholder="请输入备注" />
				</span>
			</div>
		</div>
		<div class="input">
			<view class="text">
				实付款 <text>{{detail.paypoints}}宝币</text>        
			</view>
			<button @click="submit">立即支付</button>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressObj: {},
				baseUrl:"",
				detail:{},
				remarks:"",
			}
		},
		methods: {
			chooseAddress() {
				uni.navigateTo({
					url: "/pages/address/list?choose=true"
				})
			},
			getDetail(id) {
				this.$get('pointgoodsa/goodsinfo', {
					id
				}, (res) => {
					console.log(res)
					this.detail = res
				})
			},
			submit(){
				this.$get('pointgoodsa/goodsexchange', {
					id:this.id,
					address_id:this.addressObj.id,
					remarks:this.remarks,
				}, (res) => {
					uni.showToast({
						title:"购买成功！",
						icon:"none"
					})
					setTimeout(()=>{
						uni.reLaunch({
							url: "/pages/index/index"
						})
					},1500)
				})
			}
		},
		onLoad(options) {
			this.getDetail(options.id);
			this.id = options.id;
			this.baseUrl = this.$enviorment
		},
		onShow() {
			this.addressObj = uni.getStorageSync('addressObj');
		}
	}
</script>

<style>
	.address {
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 20rpx auto;
		padding: 0 30rpx;
	}

	.address .no_address {
		height: 120rpx;
		line-height: 120rpx;
		font-size: 32rpx
	}


	.address .item .name {
		font-size: 28rpx;
		margin-bottom: 23rpx;
		padding-top: 20rpx;
	}

	.address .detail_address {
		color: #AAAAAA;
		font-size: 26rpx;
		padding-bottom: 24rpx;
	}

	.address .no_address .fr {
		width: 14rpx;
		height: 24rpx;
		margin-top: 48rpx;
	}


	.form {
		font-size: 26rpx;
		margin: 0 auto;
		color: #333;
		background-color: #FFFFFF;
		padding: 0 40rpx;
		margin-top: 20rpx;
	}

	.form .list {
		padding: 30rpx 0;
		border-bottom: 1px solid #e5e5e5;
		font-size: 30rpx;
		display: flex;
	}

	.form .list:last-child {
		border: none;
	}

	.form .list::after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}

	.form .list .left {
		width: 200rpx;
	}

	.form .list .right {
		flex: 1;
	}

	.form .list .right input {
		text-align: right;
	}

	.form .list .right image {
		width: 200rpx;
	}

	.input {
		margin: 0 auto;
		width: 630rpx;
		margin-top: 80rpx;
	}

	.input button {
		color: #FFFFFF;
		font-size: 34rpx;
		text-align: center;
		height: 98rpx;
		line-height: 98rpx;
		background: #22BF8A;
		border-radius: 8px;
	}

	.goods_info{
		background-color: #FFFFFF;
	}
	.goods_info .title{
		line-height: 86rpx;
		height: 86rpx;
		padding: 0 20rpx;
		color: #111111;
		border-bottom: 1px solid #E5E5E5;
	}
	.goods_info image{
		width: 220rpx;
		height: 170rpx;
		border: 1px solid #E5E5E5;
		float: left;
		margin-right: 20rpx;
	}
	.goods_info .info{
		padding: 20rpx;
		overflow: hidden;
	}
	.goods_info .right{
		float: left;
	}
	.goods_info .right .name{
		font-size: 26rpx;
	}
	.goods_info .right .price{
		font-size: 26rpx;
		color: #BE0000;
	}
	.input{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 98rpx;
		line-height: 98rpx;
		padding-left: 40rpx;
		background-color: #FFFFFF;
		font-size: 28rpx;
	}
	.input .text{
		float: left;
	}
	.input .text text{
		margin-left: 20rpx;
		color: #22BF8A;
	}
	.input button{
		float: right;
		width: 50%;
		background-color: #22BF8A;
		text-align: center;
		border-radius: 0;
	}
</style>
